<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center px-5">
    <h6 class="mt-2 mb-4 fs-4">
      <i
        class="fas fa-temperature-full"
        [style.color]="
          service.values.CurrentHeatingCoolingState === 2
            ? '#1e8bbd'
            : service.values.CurrentHeatingCoolingState === 1
              ? '#e69533'
              : (service.values.TargetHeatingCoolingState === 3 ? '#42d672' : '#7b7b7b')
        "
      ></i
      >{{ service.values.CurrentTemperature | convertTemp | number: '1.0-1' }}°{{ temperatureUnits | uppercase }} @if
      (hasHumidity) { &middot; {{ service.values.CurrentRelativeHumidity }}% }
    </h6>
    <div
      class="btn-group-vertical d-flex justify-content-center mb-0 p-0"
      role="group"
      [attr.aria-label]="'accessories.control.mode_control' | translate"
    >
      @if (targetStateValidValues.includes(0)) {
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(0, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode === 0, 'fa-blank': targetMode !== 0 }"></i>
        </div>
        {{ 'accessories.control.off' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      } @if (targetStateValidValues.includes(3)) {
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(3, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode === 3, 'fa-blank': targetMode !== 3 }"></i>
        </div>
        {{ 'accessories.control.auto' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      } @if (targetStateValidValues.includes(1)) {
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(1, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode === 1, 'fa-blank': targetMode !== 1 }"></i>
        </div>
        {{ 'accessories.control.heat' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      } @if (targetStateValidValues.includes(2)) {
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(2, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode === 2, 'fa-blank': targetMode !== 2 }"></i>
        </div>
        {{ 'accessories.control.cool' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      }
    </div>
    @if ('TargetTemperature' in service.values) {
    <h6 class="mt-4">
      {{ 'accessories.control.target' | translate }}: {{ targetTemperature.value | convertTemp | number: '1.0-1'
      }}&deg;{{ temperatureUnits | uppercase }}
    </h6>
    <nouislider
      [min]="targetTemperature.min"
      [max]="targetTemperature.max"
      [step]="targetTemperature.step"
      [(ngModel)]="targetTemperature.value"
      (ngModelChange)="onTemperatureStateChange()"
    />
    } @if (targetStateValidValues.includes(3)) { @if (HeatingThresholdTemperature && CoolingThresholdTemperature) {
    <h6 class="mt-4 mb-1">
      {{ 'accessories.control.threshold_auto' | translate }}: {{ autoTemp[0] | convertTemp | number: '1.0-1' }}&deg;{{
      temperatureUnits | uppercase }} - {{ autoTemp[1] | convertTemp | number: '1.0-1' }}&deg;{{ temperatureUnits |
      uppercase }}
    </h6>
    <nouislider
      [min]="HeatingThresholdTemperature.minValue"
      [max]="CoolingThresholdTemperature.maxValue"
      [step]="CoolingThresholdTemperature.minStep"
      [(ngModel)]="autoTemp"
      (ngModelChange)="onAutoThresholdStateChange()"
    />
    } @else if (HeatingThresholdTemperature && !CoolingThresholdTemperature) {
    <h6 class="mt-4">
      {{ 'accessories.control.threshold_auto' | translate }}: {{ targetHeatingTemp | convertTemp | number: '1.0-1'
      }}&deg;{{ temperatureUnits | uppercase }}
    </h6>
    <nouislider
      [min]="HeatingThresholdTemperature.minValue"
      [max]="HeatingThresholdTemperature.maxValue"
      [step]="HeatingThresholdTemperature.minStep"
      [(ngModel)]="targetHeatingTemp"
      (ngModelChange)="onThresholdStateChange()"
    />
    } @else if (!HeatingThresholdTemperature && CoolingThresholdTemperature) {
    <h6 class="mt-4">
      {{ 'accessories.control.threshold_auto' | translate }}: {{ targetCoolingTemp | convertTemp | number: '1.0-1'
      }}&deg;{{ temperatureUnits | uppercase }}
    </h6>
    <nouislider
      [min]="CoolingThresholdTemperature.minValue"
      [max]="CoolingThresholdTemperature.maxValue"
      [step]="CoolingThresholdTemperature.minStep"
      [(ngModel)]="targetCoolingTemp"
      (ngModelChange)="onThresholdStateChange()"
    />
    } }
  </div>
  <div class="modal-footer"></div>
</div>
